<template>
	<view>
		<view class="add">
			<view>新增优惠券</view>
			<view @click="goto()">+新增</view>
		</view>
		<view class="activity">
			<view class="char">
				<view @click="changeVal" data-index="0" :class="index==0?'active':''">进行中</view>
				<view @click="changeVal" data-index="1" :class="index==1?'active':''">已结束</view>
			</view>
			<view class="" v-if="inn">
				<view v-for="(item,index) in dynamicList" :key="item.id">
					<view class="card" v-if="item.status == 0">
						<view class="c" v-if="item.triggerMoney != null">
							<view class="full">满{{item.triggerMoney}}减</view>
							<view class="re">{{item.preferentialMoney}}</view>
						</view>
						<view class="c" v-if="item.triggerMoney == null">
							<view class="full">满288减</view>
							<view class="re">15</view>
						</view>
						<view class="d">

						</view>
						<view class="rule">
							<view class="a">优惠券名称：{{item.name}}</view>
							<view class="a">有效期：{{item.start}}-{{item.end}}</view>
							<view class="b">每人限领{{item.size}}张</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="out">
				<view v-for="(item,index) in dynamicList" :key="item.id">
					<view class="card" v-if="item.status == 1">
						<view class="c" v-if="item.triggerMoney != null">
							<view class="full">满{{item.triggerMoney}}减</view>
							<view class="re">{{item.preferentialMoney}}</view>
						</view>
						<view class="c" v-if="item.triggerMoney == null">
							<view class="full">满288减</view>
							<view class="re">15</view>
						</view>
						<view class="d">

						</view>
						<view class="rule">
							<view class="a">优惠券名称：{{item.name}}</view>
							<view class="a">有效期：{{item.start}}-{{item.end}}</view>
							<view class="b">每人限领{{item.size}}张</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				inn: true,
				out: false,
				dynamicList: []
			}
		},
		onLoad() {
			// 获取优惠卷信息
			const token = uni.getStorageSync('Token')
			const mid = uni.getStorageSync('UserInfo').id
			console.log("mid", mid);
			uni.request({
				url: 'http://localhost/dev-api/system/coupons/infoByMid/' + mid,
				method: 'GET',
				header: {
					'Authorization': 'Bearer ' + token,
				},
				success: (res) => {
					if (res.statusCode === 200) {
						this.dynamicList = res.data.rows;
						// console.log("res...............................");
						console.log("this.dynamicList", this.dynamicList);
					} else {
						console.log("请求失败");

					}
				},
				fail: (err) => {
					console.log("请求失败");
				},
			});
		},
		methods: {
			changeVal(event) {
				console.log(event.target.dataset.index)
				this.index = event.target.dataset.index
				if (this.index == 0) {
					this.inn = true,
						this.out = false
				} else if (this.index == 1) {
					this.inn = false,
						this.out = true
				}
			},
			goto() {
				uni.navigateTo({
					url: "/pages/distribute/distribute"
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: white;
	}

	.add {
		margin-top: 20rpx;
		display: flex;
		height: 166rpx;
		border: 1rpx solid #E0E0E0;
		align-items: center;
	}

	.add>view:nth-child(1) {
		font-size: 36rpx;
		color: rgb(13, 122, 247);
		font-weight: bolder;
		margin-left: 200rpx;
	}

	.add>view:nth-child(2) {
		width: 117px;
		height: 34px;
		font-size: 28rpx;
		line-height: 68rpx;
		border: 1rpx solid #E0E0E0;
		font-weight: bolder;
		text-align: center;
		margin-left: 80rpx;
	}

	.char {
		display: flex;
		justify-content: space-around;
		font-size: 28rpx;
	}

	.char view {
		width: 94px;
		height: 34px;
		border-radius: 13px;
		margin-top: 60rpx;
		text-align: center;
		line-height: 68rpx;
		font-weight: bolder;
		background-color: #89B0EC;
		color: white;
	}

	.char>.active {
		background-color: #0D7AF7;
	}

	.card {
		display: flex;
		background-color: #0D7AF7;
		margin-top: 50rpx;
		width: 346px;
		height: 101px;
		margin-left: 40rpx;
		border-radius: 16rpx;
	}

	.card1 {
		display: flex;
		background-color: #89B0EC;
		margin-top: 50rpx;
		width: 346px;
		height: 101px;
		margin-left: 40rpx;
		border-radius: 16rpx;
	}

	.c {
		justify-content: center; // 水平居中
		margin: 10rpx 20px 25px;

	}

	.full {
		font-size: 28rpx;
		width: 70px;
		color: white;
		margin-top: 20rpx;
		/* 文本居中 */
		text-align: center;
	}

	.re {
		width: 70px;
		font-size: 80rpx;
		margin-top: 40rpx;
		color: white;
		/* 文本居中 */
		text-align: center;

	}

	.rule {
		margin-top: 30rpx;
		margin-left: 50rpx;
	}

	.a {
		color: rgba(255, 255, 255, 0.55);
		font-size: 24rpx;
	}

	.b {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
		font-weight: bolder;
	}

	.d {
		height: 134rpx;
		border: 1rpx solid #CCE3FD;
		margin-top: 30rpx;
		/* margin-left: 10rpx; */
	}
</style>